<!-- 
   elementb搜索表单封装组件
  -->
  <template>
    <el-form label-width="120px" :inline="true" :model="searchData" ref="searchRef">
        <template v-for="(item, index) in searchItem">
            <el-form-item
                v-if="item.type === 'input' || ''"
                :label="item.label"
                :key="item.prop"
                :prop="item.prop"
            >
                <el-input style="width: 140px;" size="small" v-model="searchData[item.prop]" :placeholder="item.placeholder"></el-input>
            </el-form-item>
            <el-form-item
                v-if="item.type === 'select'"
                :label="item.label"
                :key="item.prop"
                :prop="item.prop"
            >
                <el-select
                    v-model="searchData[item.prop]"
                    @change="handleChange(item.prop)"
                    :placeholder="item.placeholder"
                    clearable
                    filterable
                    size="small"
                    style="width: 140px;"
                >
                    <el-option
                        v-for="i in item.selectList"
                        :label="i.value"
                        :value="i.id"
                        :key="i.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                v-if="item.type === 'time'"
                :label="item.label"
                :key="item.prop"
                :prop="item.prop"
            >
                <el-date-picker
                    type="date"
                    :picker-options="pickerOptions"
                    :format="item.timeFormat"
                    :value-format="item.timeFormat"
                    placeholder="选择日期"
                    v-model="searchData[item.prop]"
                    style="width: 140px;"
                    size="small"
                ></el-date-picker>
            </el-form-item>
            <el-form-item v-if="item.type === 'daterange'" :label="item.label" :key="index">
                <el-form-item :prop="item.timeList[0]">
                    <el-date-picker
                        :type="item.dateType || 'date'"
                        :picker-options="pickerOptions0"
                        :format="item.timeFormat"
                        :value-format="item.timeFormat"
                        placeholder="开始日期"
                        v-model="searchData[item.timeList[0]]"
                        style="width: 140px;"
                        @change="changeValue(searchData[item.timeList[0]], 1)"
                        size="small"
                    ></el-date-picker>
                </el-form-item>
                <span class="ml-5">-</span>
                <el-form-item :prop="item.timeList[1]">
                    <el-date-picker
                        :type="item.dateType || 'date'"
                        :picker-options="pickerOptions1"
                        :format="item.timeFormat"
                        :value-format="item.timeFormat"
                        placeholder="结束日期"
                        v-model="searchData[item.timeList[1]]"
                        @change="changeValue(searchData[item.timeList[1]], 2)"
                        style="width: 140px;"
                        size="small"
                    ></el-date-picker>
                </el-form-item>
            </el-form-item>
        </template>
        <el-form-item class="searchFloat">
            <el-button size="small" type="primary" @click="handleSearch()" plain>查 询</el-button>
            <el-button size="small" type="danger" @click="handleReset()" plain>重 置</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
const emit = defineEmits(['init','handleChange'])
const props = defineProps({
    searchData: {
        type: Object,
        required: true
    },
    searchItem: {
        type: Array,
        required: true
    }
})
const value1 = ref("")
const value2 = ref("")
const searchRef = ref()
// 单个时间
const pickerOptions = ref({
    disabledDate: time => {
        return time.getTime() > Date.now();
    }
})
// 第一个日期限制第二个日期
const pickerOptions0 = ref({
    disabledDate: time => {
        if (value2 != "" && value2 != null) {
            return (
                time.getTime() > Date.now() ||
                time.getTime() > new Date(value2)
            );
        } else {
            return time.getTime() > Date.now();
        }
    }
})
const pickerOptions1 = ref({
    disabledDate: time => {
        return (
            time.getTime() < new Date(value1) - 24 * 60 * 60 * 1000 || // 减去一天 可前后时间相等
            time.getTime() > Date.now()
        );
    }
})
function handleSearch () {
    emit("init", props.searchData);
}
function handleReset () {
    searchRef.value.resetFields();
}
function handleChange (prop) {
    emit("handleChange", prop);
}
// 获取第一个第二个时间
function changeValue (val, i) {
    if (i == 1) {
        value1.value = val;
    } else if (i == 2) {
        value2.value = val;
    }
}

</script>
  <style scoped>
  .ml-5 {
    margin-right: 10px;
    display: inline-block;
  }
  </style>
  
  <style lang="scss">
// .el-form-item__label {
//   color: #37ce59;
// }
.el-input--mini .el-input__inner {
    // width: 180px;
}
.timeWidth {
    width: 120px;
}
</style>